<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="字典名称">
        <el-input v-model="search.dictName" placeholder="字典名称"></el-input>
      </el-form-item>
      <el-form-item label="字典数据解释">
        <el-input v-model="search.dictText" placeholder="字典数据解释"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchDict(1)"><i class="el-icon-search"></i>查询</el-button>
      </el-form-item>
    </el-form>

    <br>
    <el-button type="primary" icon="el-icon-lx-add"  @click="addVisible = true">新建</el-button>
    <el-button type="primary" icon="el-icon-lx-add"  @click="flash">刷新</el-button>
    <br><br>

    <el-dialog
      title="新增字典"
      :modal="false"
      :visible.sync="addVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="addDict" status-icon :rules="rules" ref="Dict" label-width="100px" class="demo-ruleForm">
        <el-form-item label="字典名称" prop="dictName">
          <el-input  v-model="addDict.dictName"></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="dictKey">
          <el-input  type=number v-model="addDict.dictKey"></el-input>
        </el-form-item>
        <el-form-item label="数据解释" prop="dictText">
          <el-input v-model="addDict.dictText"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addNewDict">确 定</el-button>
  </span>
    </el-dialog>


    <el-table
    :data="DictList"
    >
    <el-table-column
      label="字典编号"
      prop="id">
    </el-table-column>
    <el-table-column
      label="字典名"
      prop="dictName">
    </el-table-column>
    <el-table-column
      label="字典值"
      prop="dictKey">
    </el-table-column>
    <el-table-column
      label="字典数据解释"
      prop="dictText">
    </el-table-column>
    <el-table-column
      label="操作"
     >

      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

    <el-dialog
      :modal="false"
      title="字典编辑"
      :visible.sync="editVisible"
      width="30%"
      :before-close="handleClose">
      <el-form :model="Dict" status-icon :rules="rules" ref="Dict" label-width="100px" class="demo-ruleForm">
        <el-form-item label="字典名称" prop="dictName">
          <el-input  v-model="Dict.dictName"></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="dictKey">
          <el-input  type=number v-model="Dict.dictKey"></el-input>
        </el-form-item>
        <el-form-item label="数据解释" prop="dictText">
          <el-input v-model="Dict.dictText"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="modDict">保 存</el-button>
  </span>
    </el-dialog>

    <br><br>

  <el-pagination
    background
    layout="prev, pager, next"
    :current-page="currentPage"
    :page-size="size"
    :total="total"
    @current-change="searchDict">
  </el-pagination>
</div>
</template>

<script>
  export default {
    data() {
      return {
        addVisible:false,
        editVisible:false,
        Dict:{

        },
        addDict:{

        },
        rules: {
          dictName: [
            { required: true, message: '请输入字典名称', trigger: 'blur' },
          ],
          dictKey: [
            { required: true, message: '请输入字典值', trigger: 'blur' },
          ],
          dictText: [
            { required: true, message: '请输入数据解释', trigger: 'blur' },
          ]
        },
        DictList:[],
        total:0,
        pages:5,
        size:10,
        currentPage:1,
        search:{
          dictName:'',
          dictText:''
        }
      }
    },
    created(){
      var _this = this;
      var vo = new URLSearchParams()
      vo.append('currentPage', this.currentPage);
      vo.append('pageSize', this.size);
      _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/dictList',vo).then(function (res) {
        if(res.data.code==80200){
          _this.DictList = res.data.data.records;
          _this.total = res.data.data.total;
          _this.pages = res.data.data.pages;
          _this.size = res.data.data.size;
          _this.currentPage = res.data.data.current;
        }
      })
    },
    methods: {
      addNewDict(){
        var _this  = this;
        var vo = new URLSearchParams()
        vo.append('dictName', this.addDict.dictName);
        vo.append('dictKey', this.addDict.dictKey);
        vo.append('dictText', this.addDict.dictText);
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/add',vo).then(function (res) {
          alert(res.data.msg);
          if (res.data.code == 80200){
            location.reload();
          }
        })
      },
      modDict(){
        var _this  = this;
        var vo = new URLSearchParams()
        vo.append('id', this.Dict.id);
        vo.append('dictName', this.Dict.dictName);
        vo.append('dictKey', this.Dict.dictKey);
        vo.append('dictText', this.Dict.dictText);
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/mod',vo).then(function (res) {
            alert(res.data.msg);
          if (res.data.code == 80200){
               location.reload();
          }
        })
          },
      flash(){
        location.reload();
      },
      searchDict(currentPage){
        var vo = new URLSearchParams()
        vo.append('currentPage', currentPage);
        vo.append('pageSize', this.size);
        vo.append('dictName', this.search.dictName);
        vo.append('dictText', this.search.dictText);
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/dictList',vo).then(function (res) {
          if (res.data.code == 80200) {
            _this.DictList = res.data.data.records;
            _this.total = res.data.data.total;
            _this.pages = res.data.data.pages;
            _this.size = res.data.data.size;
            _this.currentPage = res.data.data.current;
            console.log(res)
          } else {
            alert(res.data.msg);
          }
        })
  },
      handleEdit(index, row) {
        this.editVisible = true;
        var _this = this;
        _this.$http.post('http://8.135.35.123:9000/hotelsystem/tDict/view?dictId='+row.id).then(function (res) {
            if (res.data.code == 80200) {
              _this.Dict = res.data.data;

            } else {
              alert(res.data.msg);
            }})
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
</script>
<style>
  .el-pagination {
    text-align: center;
  }
</style>
